<!--
*  2021-03-15
*  织造 / 落布  流程
-->
<template>
  <div
    id="app"
    class="warping"
    tabindex="-1"
    ref="tabDiv"
    :style="{ top: top }"
  >
    <!-- 头部导航 -->
    <van-nav-bar
      left-arrow
      :title="params.stepName"
      left-text="重新扫码"
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <!-- 确认信息 -->
    <better-scroll
      ref="betterScrollId"
      class="public-scroll"
      :data="stepNo === 8 ? workerData : tableData"
      :totalPage="totalPage"
      :listenScroll="true"
      @scroll="onScroll"
    >
      <van-cell-group
        class="warping-cell"
        v-if="stepNo !== 20 && stepNo !== 23 && stepNo !== 24"
      >
        <!-- 整经报工/修布报工  多人扫码 -->
        <van-cell
            v-if="(flowType == 2 && stepNo === 1) || (flowType == 3 && stepNo== 4)"
            v-for="(data, index) in workerData"
            :key="'multiScan' + index"
            :class="data.value != '' ? 'active' : 'default'"
            class="warping-worker-zjbg"
        >
          <template #title>
            <span>{{ index + 1 + "、" + " " + data.label }}</span>
            <span> {{ data.originalValue === "" ? "产量占比(%) 100" : "产量占比(%) " + data.originalValue}} </span>
          </template>
          <template #default>
            <van-field
                v-model="data.value"
                type="tel"
                center
                clearable
                placeholder="请输入"
                @focus="onFocus(index)"
                @blur="onClickBlur4Step1(index)"
            >
            </van-field>
          </template>
          <template #right-icon>
            <van-button type="danger" size="small" @click="onDelete4Step1(index)"
            >删除</van-button
            >
          </template>
        </van-cell>
        <!-- 穿棕报工  多人扫码 -->
        <van-cell
            v-if="flowType == 2 && stepNo === 5"
            v-for="(data, index) in workerData"
            :key="'multiScan' + index"
            :class="data.value != '' ? 'active' : 'default'"
            class="warping-worker-zjbg"
        >
          <template #title>
            <span>{{ index + 1 + "、" + " " + data.label }}</span>
            <span> {{ data.originalValue === "" ? "产量占比(%) 100" : "产量占比(%) " + data.originalValue}} </span>
          </template>
          <template #default>
            <van-field
                v-model="data.value"
                type="tel"
                center
                clearable
                readonly
                @click="showPercent4Step5Fn(data)"
            >
            </van-field>
          </template>
          <template #right-icon>
            <van-button type="danger" size="small" @click="onDelete4Step1(index)"
            >删除</van-button
            >
          </template>
        </van-cell>
        <!-- 确认数据 -->
        <van-cell
          v-for="(data, index) in tableData"
          :key="'confirmData' + index"
          :class="data.value != '' ? 'active' : 'default'"
          v-show="
            data.field !== 'yarnLonArrangeView' &&
            data.field !== 'yarnLatArrangeView'
          "
          v-if="data.opt!=11"
        >
          <template #title>
            <span v-html="data.label"></span>
            <span v-html="data.originalValue"></span>
          </template>
          <template v-if="data.opt == 1" #default>
            <van-field
              v-model="data.value"
              :type="data.field == 'remark' ? 'text' : 'tel'"
              placeholder="请输入"
              ref="fieldInput"
              @blur="onBlur(index)"
              @focus="onFocus(index)"
              @input="onChangeInputVal(data)"
            />
          </template>
          <template v-else #default><!-- opt=9的为疵点 单独处理 -->
            <van-checkbox v-model="data.value" shape="square"></van-checkbox>
          </template>
        </van-cell>
        <div style="display: flex; flex-wrap: wrap;">
          <div v-if="data.opt==11 && flowType==3 && stepNo==4" v-for="(data, index) in tableData" :key="'flaw' + index" style="margin-left: 1vw; margin-top:1vh; width: 23.5vw; border: 1px solid grey; font-size: 1.8rem; display: flex; flex-direction: row; justify-content: space-between;padding: 1vh 1vw; background-color: #c47601;color:white">
            <span>{{ data.label }}</span>
            <van-stepper button-size="2.6rem" min="0" v-model.number="data.originalValue" step="0.5" :decimal-length="1"  input-width="45">
            </van-stepper>
          </div>

<!--          <div v-for="(data, index) in tableData" :key="'flaw' + index">
            <div v-if="data.opt==9 && flowType==3 && stepNo==4" style="margin-left: 1vw; margin-top:1vh; width: 15vw; display: flex; justify-content: space-between; border: 1px solid grey; font-size: 1.3rem">
              <van-button size="large"  style="width: 3vw;height:5vh;" icon="plus" type="primary"></van-button>
              <div><span>{{ data.label + '(' + data.originalValue + ')' }}</span></div>
              <div style="margin-right: 1vw;">+</div>
            </div>
          </div>-->
        </div>

        <!-- 经纱视图 -->
        <van-cell
          v-show="stepNo === 1 || stepNo === 5"
          title="经纱排列"
          :class="
            checked ? 'warping-yarn_cell cell-active' : 'warping-yarn_cell'
          "
        >
          <template slot="label">
            <div class="warping-yarn_view">
              <template v-for="(data, index) in yarnLonArrangeViewArr">
                <!-- 无层级 -->
                <div v-if="data.level == 0" :key="index + defaultIndex">
                  <span>{{ data.value }}</span>
                </div>
                <div v-else :key="index + defaultIndex">
                  <!-- 一层 -->
                  <div v-if="data.level == 1" class="level1">
                    <span
                      v-for="(level1, index1) in data.value"
                      :key="index1 + defaultIndex + level1"
                      >{{ level1 }}</span
                    >
                    <i>{{ data.loopNum }}</i>
                  </div>
                  <!-- 二层 -->
                  <div v-if="data.level == 2" class="level2">
                    <div
                      v-for="(count, index2) in data.value"
                      :key="index2 + defaultIndex + count"
                    >
                      <span v-if="typeof count === 'string'">{{ count }}</span>
                      <div v-else class="level1">
                        <span
                          v-for="(value, index3) in count.value"
                          :key="index3 + defaultIndex + value"
                          >{{ value }}</span
                        >
                        <i>{{ count.loopNum }}</i>
                      </div>
                    </div>
                    <i>{{ data.loopNum }}</i>
                  </div>
                  <!-- 三层 -->
                  <div v-if="data.level == 3" class="level3">
                    <div
                      v-for="(count, index4) in data.value"
                      :key="index4 + defaultIndex + count"
                    >
                      <span v-if="typeof count === 'string'">{{ count }}</span>
                      <div v-else class="level2">
                        <div
                          v-for="(count2, index5) in count.value"
                          :key="index5 + defaultIndex + count2"
                        >
                          <span v-if="typeof count2 === 'string'">{{
                            count2
                          }}</span>
                          <div v-else class="level1">
                            <span
                              v-for="(count3, index6) in count2.value"
                              :key="index6 + defaultIndex + count3"
                            >
                              {{ count3 }}</span
                            >
                            <i>{{ count2.loopNum }}</i>
                          </div>
                          <i>{{ count.loopNum }}</i>
                        </div>
                      </div>
                      <i>{{ data.loopNum }}</i>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </template>
          <template #default>
            <van-checkbox v-model="checked" shape="square"></van-checkbox>
          </template>
        </van-cell>
        <!-- 纬纱视图 -->
        <van-cell
          v-show="stepNo === 12"
          title="纬纱排列"
          :class="
            checked ? 'warping-yarn_cell cell-active' : 'warping-yarn_cell'
          "
        >
          <template slot="label">
            <div class="warping-yarn_view">
              <template v-for="(data, index) in yarnLatArrangeViewArr">
                <!-- 无层级 -->
                <div v-if="data.level == 0" :key="index + defaultIndex">
                  <span>{{ data.value }}</span>
                </div>
                <div v-else :key="index + defaultIndex">
                  <!-- 一层 -->
                  <div v-if="data.level == 1" class="level1">
                    <span
                      v-for="(level1, index1) in data.value"
                      :key="index1 + defaultIndex + level1"
                      >{{ level1 }}</span
                    >
                    <i>{{ data.loopNum }}</i>
                  </div>
                  <!-- 二层 -->
                  <div v-if="data.level == 2" class="level2">
                    <div
                      v-for="(count, index2) in data.value"
                      :key="index2 + defaultIndex + count"
                    >
                      <span v-if="typeof count === 'string'">{{ count }}</span>
                      <div v-else class="level1">
                        <span
                          v-for="(value, index3) in count.value"
                          :key="index3 + defaultIndex + value"
                          >{{ value }}</span
                        >
                        <i>{{ count.loopNum }}</i>
                      </div>
                    </div>
                    <i>{{ data.loopNum }}</i>
                  </div>
                  <!-- 三层 -->
                  <div v-if="data.level == 3" class="level3">
                    <div
                      v-for="(count, index4) in data.value"
                      :key="index4 + defaultIndex + count"
                    >
                      <span v-if="typeof count === 'string'">{{ count }}</span>
                      <div v-else class="level2">
                        <div
                          v-for="(count2, index5) in count.value"
                          :key="index5 + defaultIndex + count2"
                        >
                          <span v-if="typeof count2 === 'string'">{{
                            count2
                          }}</span>
                          <div v-else class="level1">
                            <span
                              v-for="(count3, index6) in count2.value"
                              :key="index6 + defaultIndex + count3"
                            >
                              {{ count3 }}</span
                            >
                            <i>{{ count2.loopNum }}</i>
                          </div>
                          <i>{{ count.loopNum }}</i>
                        </div>
                      </div>
                      <i>{{ data.loopNum }}</i>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </template>
          <template #default>
            <van-checkbox v-model="checked" shape="square"></van-checkbox>
          </template>
        </van-cell>
        <!-- 插片 第8步 -->
        <van-cell
          v-show="stepNo === 8"
          v-for="(data, index) in workerData"
          :key="index"
          :class="{ active: data.value != '' }"
          class="warping-worker"
        >
          <template #title>
            <span>{{ index + 1 + "、" + " " + data.label }}</span>
            <span>剩余数量：{{ data.originalValue }}</span>
          </template>
          <template #default>
            <van-field
              v-model="data.value"
              type="tel"
              center
              clearable
              @focus="onFocus(index)"
              @input="onClickInput(data)"
              @blur="onClickBlur"
            >
            </van-field>
          </template>
          <template #right-icon>
            <van-button type="danger" size="small" @click="onDelete(index)"
              >删除</van-button
            >
          </template>
        </van-cell>

        <!-- 修布疵点按钮 -->
        <div v-if="params.flowType === 3 && (params.stepNo === 4 || params.stepNo === 5)">
          <grey-cloth-repair style="width: 98vw;" ref="greyClothRepairRef" v-if="params.flowType === 3 && (params.stepNo === 4 || params.stepNo === 5)" :params="params"></grey-cloth-repair>
        </div>


<!--         <van-button
          v-show="!finished"
          class="warping-btn"
          @click="onClickPrint"
        >
          重新打印
        </van-button>-->
        <!-- 提交按钮 -->
        <van-button
          v-show="tableData.length !== 0"
          class="warping-btn"
          @click="userClickBtn"
          >确认</van-button
        >
      </van-cell-group>
      <van-cell-group class="warping-cell" v-else>
        <!-- 确认数据 -->
        <van-cell
          v-for="(data, index) in tableData"
          :key="index"
          :title="title"
        >
          <template #default v-if="stepNo === 24">
            <van-button
              type="warning"
              size="normal"
              @click="onGetWeavingOptType(1)"
              >穿 棕</van-button
            >
            <van-button
              type="primary"
              size="normal"
              @click="onGetWeavingOptType(2)"
              >打 结</van-button
            >
          </template>
          <template #default v-else>
            <van-field
              v-model="data.loomNo"
              type="tel"
              placeholder="请输入织机号"
              readonly
              @click="onClickFocus(index)"
            />
          </template>
        </van-cell>
        <van-button
          v-show="tableData.length !== 0 && stepNo !== 24"
          class="warping-btn"
          @click="onClickLoomNo"
          >确认</van-button
        >
      </van-cell-group>
    </better-scroll>

    <!-- 绣字 -->
    <van-dialog
      v-model="isShow"
      title="绣字"
      class="login-dialog"
      @confirm="onGetNextInfo"
    >
      <van-button text="重新打印" type="primary" @click="onClickPrint"></van-button>
      <van-cell title="编号" :value="tableObj.designNo" />
      <van-cell title="织机号" :value="tableObj.loomNo" />
      <van-cell title="重量" :value="tableObj.weight" />
      <van-cell title="长度" :value="tableObj.length" />
    </van-dialog>

    <!-- 重新扫码 -->
    <van-dialog
      v-model="isLogin"
      className="login-dialog"
      title="确认重新扫码？"
      show-cancel-button
      confirm-button-text="重新扫码"
      @confirm="onClickBack"
    >
      <span>扫码后需重新登陆</span>
    </van-dialog>

    <!-- 选择织机 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        title="机台号"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>

    <!-- 穿综/打结 -->
    <van-dialog
      v-model="isType"
      className="login-dialog"
      title="请确认"
      show-cancel-button
      confirm-button-text="确认"
      @confirm="onClickChangeType"
    >
      <span>下一流程：{{ optType == 1 ? "穿棕" : "打结" }}</span>
    </van-dialog>

    <!-- 警报 -->
    <van-popup
      v-model="warning"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
      <van-dialog
        v-model="warning"
        className="login-dialog warning-bg"
        title="请确认"
        :show-cancel-button="false"
        confirm-button-text="确认"
        @confirm="warning = false"
      >
        <span>{{ warningText }}</span>
      </van-dialog>
    </van-popup>

    <!-- 穿棕多人报工百分比计算 -->
    <van-popup v-model="showYarnNumPop" get-container="#app">
      <div style="padding:1vh 2vw;" class="yarn-num-pop-body">
        <div style="display: flex; justify-content: center; align-items: center; font-size: 1.2rem;">
          <span>总经: {{ totalLonNum }} 根</span>
        </div>
        <van-field colon clearable type="tel" label="根数" v-model="curWorkerPercent.yarnNum" @input="calPercent4Step5Fn"></van-field>
        <van-field colon clearable type="tel" label="占比" v-model="curWorkerPercent.percent"></van-field>
        <div style="display: flex; justify-content: center; align-items: center;">
          <van-button type="primary" size="small" @click="confirmPercent4Step5Fn">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  getConfirmStep,
  getNextCommit,
  getNextInfo,
  // getTaskList,
  getTaskAcceptNext,
  getTaskAccept,
  getWeavingOptType,
  getWeavingLoom,
  getByType,
  getWeavingClothByStepNo, lastDataItem4Craft, weavingCraftDetail,
} from "@/api/warping";
import {getTaskStep, getInit, getLoginList} from "@/api/login";
import { openWin, randomStr, getFloat } from "@/utils/index";
import {getInfo, setErrorWeight} from "@/utils/auth";
import dayjs from "dayjs";
import {SPLIT_BLANK, SPLIT_COLON, SPLIT_COMMA, SPLIT_SPACE} from "@/utils/enum";
import {loadFlawConfigData} from "@/api/flaws";
import {randomColor} from "@/utils/common";
import storage from "good-storage";
import GreyClothRepair from "@/views/warping/grey-cloth-repair";
export default {
  name: "Warping",
  components: {GreyClothRepair},
  data() {
    return {
      tableData: [
        {
          value: "",
          originalValue: "",
          field: "greyClothWeight",
          opt: 1,
          label: "",
        },
      ],
      nextStepData: [],
      nextStepAllData: [],
      params: {},
      show: false,
      radioGroup: [],
      radio: "5",
      resId: "",
      isShow: false,
      tableObj: {},
      demo: "",
      totalPage: 1,
      isLogin: false,
      result: [],
      doingResUrl: "",
      subResIds: [],
      length: "",
      printMac: "",
      metreMac: "",
      pos: {},
      value: "",
      stepNo: "",
      flowType: "",
      designFormId: "",
      resArr: [],
      totalLonNum: "",
      planId: "",
      craftNum: "",
      craftSingle: "",
      top: 0,
      scrollH: 0,
      productWidth: "",
      arrange: "",
      leftArrange: "",
      rightArrange: "",
      reedSize: "",
      operateWidth: "",
      operateLatDensity: "",
      yarnLatArrangeView: "",
      yarnLonArrangeView: "",
      // "[1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D+1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D+1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D+1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D+1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D+1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D+1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D+1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D+1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D+1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D+1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D+1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D+1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D]",
      // "[1:3_1_1A@2B,2:2_2_1@3C,3:5_3_2@5C]+[4:2_1_3B@4C,5:6_2_1A@4]+[6:5_1_3A@5D]",
      yarnLonArrangeViewArr: [],
      yarnLatArrangeViewArr: [],
      latYarnSubtotal: "",
      workerData: [
        {
          opt: 9,
          label: "",
          value: "",
          field: "",
          originalValue: "",
        },
      ],
      code: "",
      lastTime: "",
      nextTime: "",
      lastCode: "",
      nextCode: "",
      loading: false,
      totalLength: 0,
      defaultIndex: randomStr(),
      finished: false,
      checked: false,
      title: "",
      optType: 1,
      columns: [],
      showPicker: false,
      index: 0,
      nowHeight: "",
      defaultHeight: "",
      lastClickTime: 0,
      isType: false,
      warning: false,
      warningText: "",
      loginList: [],
      fixWarpFlag: false,

      /* 穿棕百分比弹窗 */
      showYarnNumPop: false,
      curWorkerData: {},
      curWorkerPercent: {
        yarnNum: "",
        percent: "",
      },

      /* 疵点 */
      flaw: {
        taskId: 0,
        curBtn: null,
        btnArr: [],
        data: [],
      }
    };
  },
  watch: {
    printMac() {
      if (this.printMac) {
        if (this.params.stepNo === 15) {
          this.isEnabledBluetooth(false);
        }
      }
    },
    // 监听步骤
    stepNo(val) {
      const that = this;
      if((that.flowType == 2 && (val === 8 || val === 5 || val === 1)) || (that.flowType == 3 && val == 4)) {
        that.onGetLoginList()
        that.onWatchEnter();
      }
      setTimeout(() => {
        if (
          that.flowType === 2 &&
          (val === 1 ||
            val === 3 ||
            val === 5 ||
            val === 8 ||
            val === 10 ||
            val === 12 ||
            val === 13 ||
            val === 14 ||
            val === 18 ||
            val === 19)
        ) {
          // 获取织造计划  经纱数据
          that.resArr = that.params.resUrl.split(",");
          let url =
            process.env.VUE_APP_YARN_URL +
            that.resArr[0] +
            "/" +
            that.params.resId;
          getConfirmStep(
            {
              resUrl: url,
            },
            (res) => {
              if (res) {
                that.planId = res.planId;
                if (that.tableData && that.tableData.length != 0) {
                  that.tableData.forEach((item) => {
                    if (item.field === "craftNum") {
                      that.$set(item, "originalValue", res.craftNum);
                    } else if (item.field === "craftSingle") {
                      that.$set(item, "originalValue", res.craftSingle);
                    } else if (item.field === "arrange") {
                      that.$set(item, "originalValue", res.arrange);
                    } else if (item.field === "leftArrange") {
                      that.$set(item, "originalValue", res.leftArrange);
                    } else if (item.field === "rightArrange") {
                      that.$set(item, "originalValue", res.rightArrange);
                    } else if (item.field === "alternateNum") {
                      that.$set(item, "originalValue", res.alternateNum);
                    } else if (item.field === "lonParameter") {
                      that.$set(item, "originalValue", res.lonParameter);
                    } else if (item.field === "latParameter") {
                      that.$set(item, "originalValue", res.latParameter);
                    } else if (item.field === "craftRequire") {
                      that.$set(item, "originalValue", res.craftRequire);
                    } else if (item.field === "palmThreadWay") {
                      that.$set(item, "originalValue", res.jacquardFlag == 1 ? "提花" : res.palmThreadWay == 1 ? "顺穿" : "花穿");
                    }
                  });
                }

                that.$forceUpdate();
                if (
                  val === 1 ||
                  val === 3 ||
                  val === 5 ||
                  val === 8 ||
                  val === 10 ||
                  val === 12 ||
                  val === 13 ||
                  val === 14 ||
                  val === 20
                ) {
                  that.designFormId = res.designFormId;
                }

                if(val === 18) {    //上轴报工
                  that.fixWarpFlag = res.fixWarp;
                }
              }
            }
          );
        }
        if (val === 20 || val === 23) {
          that.onGetTableList();
        }
      }, 2000);
    },
    // 监听设计Id
    designFormId() {
      const that = this;
      let url =
        process.env.VUE_APP_YARN_URL + that.resArr[1] + "/" + that.designFormId;
      getConfirmStep(
        {
          resUrl: url,
        },
        (res) => {
          that.totalLonNum = res.totalLonNum; // 总经
          that.reedSize = res.reedSize + "/" + res.reedDensity; // 筘号
          that.operateWidth = res.operateWidth; // 上机筘幅 / 幅宽
          that.operateLatDensity = res.operateLatDensity; // 上机纬密
          that.latYarnSubtotal = res.latYarnSubtotal; // 纬纱根数
          that.greyClothWeight = res.greyClothWeight; // 米克重
          that.operateLatDensity = res.operateLatDensity; // 纬密
          that.yarnLonArrangeView = res.yarnLonArrangeView; // 经纱排列
          that.yarnLatArrangeView = res.yarnLatArrangeView; // 纬纱排列
          that.tableData.forEach((item) => {
            if (item.field === "totalLonNum") {
              that.$set(item, "originalValue", that.totalLonNum);
            } else if (item.field === "productWidth") {
              that.$set(item, "originalValue", that.productWidth);
            } else if (item.field === "reedSize") {
              that.$set(item, "originalValue", that.reedSize);
            } else if (item.field === "operateWidth") {
              that.$set(item, "originalValue", that.operateWidth);
            } else if (item.field === "operateLatDensity") {
              that.$set(item, "originalValue", that.operateLatDensity);
            } else if (item.field === "latYarnSubtotal") {
              that.$set(item, "originalValue", that.latYarnSubtotal);
            } else if (item.field === "greyClothWeight") {
              that.$set(item, "originalValue", that.greyClothWeight);
            } else if (item.field === "yarnLonArrangeView") {
              that.$set(item, "originalValue", res.yarnLonArrangeView);
            } else if (item.field === "yarnLatArrangeView") {
              that.$set(item, "originalValue", res.yarnLatArrangeView);
            }
          });
          that.$forceUpdate();
        }
      );
    },
    // 监听总经
    totalLonNum() {
      const that = this;
      if (that.params.scanCode && that.params.scanCode.indexOf("98,") == 0) {
        if(that.stepNo === 1 || that.stepNo === 5 || that.stepNo === 10 || that.stepNo === 12) {
          const craftDetailId = that.params.scanCode.split(SPLIT_COMMA)[3];
          weavingCraftDetail({
            detailId: craftDetailId
          }, data => {
            let yarns;
            if(that.stepNo == 1 || that.stepNo == 5 || that.stepNo == 10) {
              yarns = data.lonYarn;
            } else {
              yarns = data.latYarn;
            }
            yarns.forEach(yarn => {
              yarn.yarnAlias = yarn.alias;
              yarn.yarnStandard = yarn.standard;
              yarn.yarnStrandNum = yarn.strandNum;
            })
            that.fillYarnFn(yarns);
          })
        }
      } else if (that.stepNo === 1 || that.stepNo === 12) {
        // 获取经纱
        let url = process.env.VUE_APP_YARN_URL + that.resArr[2] + "?planId=" + that.planId + "&type=" + (that.stepNo === 1 ? 0 : 1);
        getConfirmStep({
          resUrl: url,
        }, res => {
          // console.log(JSON.stringify(res), 4);
          if (res && res.length != 0) {
            that.fillYarnFn(res);
          }
        });
      }
    },
    // 监听总经数
    workerData: {
      handler() {
        if(this.flowType == 2 && this.stepNo == 8) {    //插片多人
          this.totalLength = 0;
          if (this.workerData.length != 0) {
            this.workerData.forEach((item) => {
              this.totalLength += Number(item.value * 100);
            });
          }
          this.totalLength = this.totalLength / 100;
          if (
              this.workerData[this.workerData.length - 1].label != "" &&
              this.workerData[this.workerData.length - 1].value == ""
          ) {
            this.workerData[this.workerData.length - 1].originalValue = (
                this.totalLonNum - this.totalLength
            ).toString();
            this.$forceUpdate();
          }
        }
      },
      deep: true,
    },
    // 监听输入总经数
    // totalLength(val) {
    //   if (val > this.totalLonNum) {
    //     this.$toast.fail("输入的总经数异常");
    //   }
    // },
    // 监听纬纱
    yarnLatArrangeView() {
      this.onGetArrangeView("yarnLatArrange", this.yarnLatArrangeView);
    },
    yarnLonArrangeView() {
      this.onGetArrangeView("yarnLonArrange", this.yarnLonArrangeView);
    },
  },
  mounted() {
    const that = this;
    // setTimeout(() => {
    //   this.onGetArrangeView("yarnLonArrange", this.yarnLonArrangeView);
    // }, 3000);
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.initFn();
      });
    } else {
      window.apiready = () => {
        that.initFn();
      };
    }
  },
  methods: {
    initFn() {
      const that = this;
      that.params = window.api.pageParam;
      that.title = window.api.pageParam.title;
      that.stepNo = window.api.pageParam.stepNo;
      that.flowType = window.api.pageParam.flowType;
      // 获取tableData数据
      that.onGetTableData();
      that.onGetInit();
      // 监听页面消失的时候，关掉页面就可以了
      window.api.addEventListener({
        name: "viewdisappear",
      }, function () {
        window.removeEventListener("keydown", that.onClickKeydown);
        window.api.closeWin();
      });
      // var keyBoardMgr = window.api.require("keyBoardMgr");
      // keyBoardMgr.addKBListener(() => {
      //   // window.api.toast({
      //   //   msg: JSON.stringify(ret) + "",
      //   // });
      // });

      // eslint-disable-next-line no-unused-vars
      // function onKeyBoardChanged(isShow) {
      //   if (isShow == 0) {
      //     console.log(1);
      //   }
      // }
    },
    openWin,
    // 重新扫码
    onClickLeft() {
      this.isLogin = true;
    },
    // 重新扫码
    onClickBack() {
      this.tableData = [];
      openWin("index");
    },
    onGetLoginList() {
      const that = this;
      getLoginList("", function (res) {
        that.loginList = res;
      });
    },
    // 获取织机配置
    onGetTableList() {
      const that = this;
      getByType(
        {
          pageSize: 1000,
          type: 10,
        },
        (res) => {
          res.list.forEach((item) => {
            that.columns.push(item.propertyName);
          });
        }
      );
    },
    onConfirm(value) {
      this.tableData[this.index].loomNo = value;
      this.showPicker = false;
    },
    onClickFocus(index) {
      this.index = index;
      this.showPicker = true;
    },
    // 打印初始化
    onGetInit() {
      this.printMac = "";
      this.metreMac = "";
      this.pos = {};
      const that = this;
      getInit({}, (res) => {
        let resultArr = eval("(" + res.propertyValue + ")");
        // console.log(JSON.stringify(resultArr), 7);
        resultArr.forEach((item) => {
          // console.log(JSON.stringify(item))
          if (item.type == "1") {
            that.printMac = item.mac;
            let posData = item.pos.split(",");
            that.pos = {
              x: Number(posData[0]),
              y: Number(posData[1]),
            };
          } else if (item.type == "2") {
            that.metreMac = item.mac;
          }
        });
      });
    },
    // 获取table数据
    onGetTableData() {
      const that = this;
      let url =
        process.env.VUE_APP_YARN_URL +
        that.params.nextResUrl +
        "/" +
        that.params.stepNo;
      that.tableData = [];
      // 落布流程
      if (that.params.flowType === 3) {
        url =
          process.env.VUE_APP_YARN_URL +
          that.params.nextResUrl +
          "/" +
          that.params.taskId;
      } else {
        // 织造流程
        if (
          that.params.stepNo === 2 ||
          that.params.stepNo === 4 ||
          that.params.stepNo === 11 ||
          that.params.stepNo === 6 ||
          that.params.stepNo === 21 ||
          that.params.stepNo === 22
        ) {
          url =
            process.env.VUE_APP_YARN_URL +
            that.params.nextResUrl +
            "/" +
            that.params.stepId;
        } else if (that.params.stepNo === 15) {
          url =
            process.env.VUE_APP_YARN_URL +
            that.params.nextResUrl +
            "?stepId=" +
            that.params.stepId +
            "&count=3";
        } else if (
          that.params.stepNo === 20 ||
          that.params.stepNo === 23 ||
          that.params.stepNo === 24
        ) {
          url =
            process.env.VUE_APP_YARN_URL +
            that.params.nextResUrl +
            "/" +
            that.params.resId;
        }
      }

      getConfirmStep(
        {
          resUrl: url,
        },
        (res) => {
          // 落布流程
          // console.log(res, "流程");
          if (
            that.params.flowType === 2 &&
            that.params.stepNo !== 20 &&
            that.params.stepNo !== 23 &&
            that.params.stepNo !== 24
          ) {
            if (res.items) {
              // console.log(JSON.stringify(res.items), 8);
              res.items.forEach((item) => {
                item.value =
                  item.field == "remark"
                    ? item.value
                      ? item.value
                      : "无"
                    : item.value;
              });
            }
          }
          if (that.params.flowType === 3) {
            that.params.resId = res.id;
            if (that.params.stepNo === 5) {
              // 绣字 织造最后一步
              that.tableObj = res;
              that.isShow = true;
            } else if (that.params.stepNo === 1) {
              that.$toast("生成坯布信息");
              that.onGetNextInfo();
            } else if (that.params.stepNo === 4) {
              //加载疵点配置
              that.flaw.taskId = that.params.taskId;
              loadFlawConfigData({
                type: 1
              }, data => {
                data.forEach(flaw => {
                  that.flaw.btnArr.push({
                    text: flaw,
                    color: randomColor(1),
                  });
                });
              });

              // 修布 不走配置
              that.tableData = [{
                value: true,
                originalValue: "",
                label: "是否已修布",
                field: "finishCloth",
                opt: 2,
              }, {
                value: false,
                originalValue: "",
                label: "是否头匹",
                field: "firstFlag",
                opt: 2,
              }];
            }
          } else {
            // 第一步流程
            if (res != null && res.constructor === Object) {
              if (
                that.params.stepNo === 20 ||
                that.params.stepNo === 23 ||
                that.params.stepNo === 24
              ) {
                // 穿综/打结
                that.tableData = [res];
                // console.log(res, that.params.stepNo);
              } else {
                that.tableData = res.items;
              }
            } else {
              // console.log(JSON.stringify(res), 9);
              if (res && res.length != 0) {
                res.forEach((items) => {
                  if (items.items && items.items.length != 0) {
                    items.items.forEach((item) => {
                      // console.log(item.field);
                      // console.log(item.originalValue);
                      that.yarnLatArrangeView =
                        item.field === "yarnLatArrangeView"
                          ? item.originalValue
                          : "";
                      that.tableData.push(item);
                    });
                  }
                });
              }
            }
          }
          that.stepNo = window.api.pageParam.stepNo;

          // console.log("---->tableData:", that.tableData);
          if(that.params.stepNo == 1 && that.params.flowType === 2) {
            lastDataItem4Craft({
              taskId: that.params.taskId,
              field: "drift"
            }, lastItem => {
              let curItem = that.tableData.find(item => item.field == "drift")
              curItem.originalValue = lastItem.value;
            });
          }
        }
      );
    },
    // 获取焦点页面上移
    onFocus(index) {
      this.currIndex = index;
      setTimeout(() => {
        this.top = index > 2 ? -((index - 2) * 87) - this.scrollH + "px" : 0;
      }, 200);
    },
    // 失去焦点 还原
    onBlur(index) {
      if (index === 5 || index === 9) {
        this.top = 0;
      }
      //  this.top = 0;
    },
    // 输入是否正常
    onChangeInputVal(data) {
      this.warning = false;
      if (data.field === "greyClothWeight") {
        // 克重
        if (data.value.length === data.originalValue.toString().length) {
          // console.log(Number(data.originalValue) + 21);
          if (
            data.value > Number(data.originalValue) + 21 ||
            data.value < Number(data.originalValue) - 21
          ) {
            // 警报
            this.warningText = "米克重超警戒值";
            this.$refs.tabDiv.focus();
            this.warning = true;
          }
        }
      } else if (data.field === "operateWidth" && this.stepNo > 10) {
        // 下机门幅
        let index = data.originalValue.toString().indexOf(".");
        let bool;
        if (index == -1) {
          bool = data.value.length === data.originalValue.toString().length;
        } else {
          bool = data.originalValue.toString().length - 2 <= data.value.length;
        }
        if (bool) {
          if (Number(data.value) < (Number(data.originalValue) - Math.round(data.originalValue * 0.07)) ||
            Number(data.value) > (Number(data.originalValue) + Math.round(data.originalValue * 0.04))) {
            // 警报
            this.warningText = "下机门幅超警戒值";
            this.$refs.tabDiv.focus();
            this.warning = true;
          }
        }
      } else if (data.field === "lonSpindleNum") {
        // 筒只数
        let lonKnotNum = "";
        // console.log(JSON.stringify(this.tableData), 11);
        if (this.tableData && this.tableData.length != 0) {
          this.tableData.forEach((item) => {
            if (item.field === "lonKnotNum") {
              // 结数
              item.value = Math.ceil(this.totalLonNum / data.value);
              lonKnotNum = item.value;
            } else if (item.field === "lonKnotWidth") {
              // 结阔
              item.value = getFloat(
                (data.value / this.totalLonNum) * 10 * this.operateWidth,
                1
              );
            } else if (item.field === "lonNoKnotNum") {
              // 末结
              setTimeout(() => {
                item.value = this.totalLonNum - data.value * lonKnotNum;
                this.$forceUpdate();
              }, 500);
            }
          });
        }
      }
    },
    // 滚动高度
    onScroll(pos) {
      this.scrollH = pos.y;
    },
    // 删除
    onDelete(index) {
      if (
        this.workerData.length != 1 &&
        this.workerData[index].label != "" &&
        this.workerData[index].value != ""
      ) {
        this.workerData.splice(index, 1);
        this.$refs.betterScrollId.refresh();
      }
    },
    // 穿棕/打结
    onGetWeavingOptType(optType) {
      this.optType = optType;
      this.isType = true;
    },
    //穿棕/打结
    onClickChangeType() {
      const that = this;
      getWeavingOptType(
        {
          id: that.params.resId,
          optType: that.optType,
        },
        () => {
          that.onGetNextInfo();
        }
      );
    },
    // 分配织机
    onClickLoomNo() {
      if (this.tableData[0].loomNo) {
        getWeavingLoom(
          {
            id: this.params.resId,
            loomNo: this.tableData[0].loomNo,
          },
          () => {
            this.onGetNextInfo();
          }
        );
      }
    },
    // 重新打印
    onClickPrint() {
      const that = this;
      getTaskStep(
        {
          resUrl:
            process.env.VUE_APP_YARN_URL +
            that.params.doingResUrl +
            "/" +
            that.params.taskId,
        },
        (doingUrl) => {
          getWeavingClothByStepNo(
            {
              taskId: that.params.taskId,
              stepNo: 3,
            },
            (resUrl) => {
              let str = SPLIT_BLANK;
              const flaws = that.$refs.greyClothRepairRef.getStepFlawDataFn();
              if(flaws && flaws.length > 0) {
                str = flaws.map(flaw => flaw.flaw + SPLIT_COLON + flaw.pos).join(SPLIT_SPACE);
              }
              doingUrl.str = str;
              // 连接打印
              that.$toast({
                type: "loading",
                message: "查询打印机连接状态",
              });
              let obj = window.api.require("xGprinterPlus");
              let ret = obj.getConnectState();
              if (ret.status) {
                let result = false;
                ret.state.forEach((bool) => {
                  if (bool) {
                    result = bool;
                  }
                });
                if (result) {
                  // 已连接  获取打印数据打印
                  that.onPrintLabel(doingUrl);
                } else {
                  // 未连接
                  that.$toast({
                    type: "error",
                    message: "未连接, 请等待",
                    duration: 1500,
                    onClose: () => {
                      that.connectBleByMacAddress2(doingUrl, true);
                    },
                  });
                }
              } else {
                // 未连接
                that.$toast({
                  type: "error",
                  message: "未连接, 请等待",
                  duration: 1500,
                  onClose: () => {
                    that.connectBleByMacAddress2(doingUrl, true);
                  },
                });
              }
            }
          );
          // getTaskStep(
          //   {
          //     resUrl:
          //       process.env.VUE_APP_YARN_URL +
          //       that.params.resUrl +
          //       "/" +
          //       that.params.stepId,
          //   },
          //   (resUrl) => {

          //   }
          // );
        }
      );
    },
    connectBleByMacAddress2(data, status) {
      const that = this;
      if (status) {
        that.$toast({
          type: "loading",
          message: "正在连接，请稍后",
          duration: 20000,
        });
      }
      let demo = window.api.require("xGprinterPlus");
      demo.connectBleByMacAddress({
        macAddress: that.printMac
      }, (ret, err) => {
        if (ret.status) {
          if (ret.message === "已连接") {
            that.$toast.clear();
            // console.log("已连接");
            // 绣字打印
            if (status) {
              that.onPrintLabel(data);
            }
          } else if (ret.message === "连接失败") {
            that.$toast.fail("连接失败");
          }
        } else {
          that.$toast.fail(err.msg);
        }
      });
    },
    // 绣字前打印
    onPrintLabel(data) {
      const that = this;
      let y1 = [
        that.pos.y,
        that.pos.y + 200,
        that.pos.y + 600,
        that.pos.y + 900,
      ];
      let errorWeight = (
        (Number(data.weight) / Number(data.length)) *
        2
      ).toFixed(2);
      setErrorWeight(errorWeight);
      let demo = window.api.require("xGprinterPlus");
      let rows = [
        {
          lineType: "size",
          width: 30,
          height: 160,
        },
        {
          lineType: "gap",
          data: 2,
        },
        {
          lineType: "direction", //设置打印方向
          direction: "forward", //backward|forward
          mirror: "normal", //normal|mirror
        },
        {
          lineType: "cls", // 清除打印缓冲区
        },
        {
          lineType: "text", //绘制简体中文
          x: that.pos.x,
          y: y1[0],
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "经轴编号：" + data.craftNo,
        },
        {
          lineType: "text", //绘制简体中文
          x: that.pos.x,
          y: y1[1],
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "工艺品名：" + data.designNo,
        },
        {
          lineType: "text", //绘制简体中文
          x: that.pos.x,
          y: y1[2] + 200,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "色号：" + data.colorNo,
        },
        {
          lineType: "text", //绘制简体中文
          x: that.pos.x,
          y: y1[3] + 150,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "批号：" + data.lotNo,
        },

        {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 35,
          y: that.pos.y,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "匹号：" + data.designSeqNo,
        },
        {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 35,
          y: that.pos.y + 300,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "织机号: " + data.loomNo,
        },
        {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 35,
          y: that.pos.y + 600,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "落布人：" + data.receiverName,
        },
        {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 35,
          y: that.pos.y + 900,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "落布日期：" + dayjs(data.receiveAt).format("YYYY-MM-DD HH:mm"),
        },

        {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 85,
          y: that.pos.y,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "下机门幅: " + data.width,
        },
        {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 85,
          y: that.pos.y + 190,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "坯布长: " + data.length,
        },
        {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 85,
          y: that.pos.y + 380,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "坯布重: " + data.weight,
        },
        {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 85,
          y: that.pos.y + 570,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data:
            "米克重: " +
            parseInt((Number(data.weight) / Number(data.length)) * 1000),
        },
        {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 85,
          y: that.pos.y + 760,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "纬密: " + data.latDensity,
        },
        {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 85,
          y: that.pos.y + 950,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "检验人: " + data.inspectorName,
        }, {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 85,
          y: that.pos.y + 1140,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "预计坯布",
        }, {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 135,
          y: that.pos.y,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "预计成品克重: " + data.miWeightDesign,
        }, {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 135,
          y: that.pos.y + 240,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "刻盘克重: " + data.miWeight,
        }, {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 135,
          y: that.pos.y + 460,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "成份含量: " + data.productComposition.replace(/ /g, ""),
        }, {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 135,
          y: that.pos.y + 910,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: "入库绣字: " + data.embroideryNo,
        }, {
          lineType: "text", //绘制简体中文
          x: that.pos.x - 185,
          y: that.pos.y,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: data.str,
        },
      ];
      if (data.str2) {
        rows.push({
          lineType: "text", //绘制简体中文
          x: that.pos.x - 235,
          y: that.pos.y,
          rotation: 90, // 0|90|180|270
          xscal: 1, //1~10
          yscal: 1, //1~10
          data: data.str2,
        });
      }
      demo.printLabel(
        {
          rows: rows,
        },
        function (ret, err) {
          if (ret.status) {
            that.$toast({
              type: "success",
              message: "打印成功",
              onClose: () => {
                that.finished = true;

                //重新打印 退出重新扫码
                that.onClickBack();
              },
            });
          } else {
            that.getConnectState(data);
            that.$toast.fail("打印异常" + err.msg);
          }
        }
      );
    },
    onClickBlur() {
      this.top = 0;
      if (this.totalLength > this.totalLonNum) {
        this.$toast.fail("总经数异常,请核对");
        return;
      }
    },
    onClickInput(data) {
      this.currIndex = this.workerData.length - 1;
      this.loading = false;
      if (
        this.workerData[this.currIndex].label != "" &&
        this.workerData[this.currIndex].value != ""
      ) {
        if (data.value) {
          let params = {
            opt: 9,
            label: "",
            value: "",
            field: "",
            originalValue: "",
          };
          this.workerData.push(params);
          this.currIndex = this.workerData.length - 1;
          this.$refs.betterScrollId.refresh();
        }
      }
    },
    //
    onClickBlur4Step1() {
      let percent = 0;
      this.workerData.forEach((item) => {
        percent += Number(item.value);
      });
      if(percent > 100) {
        this.$toast.fail("产量总比超过100%");
        return;
      }
      this.currIndex = this.workerData.length - 1;
      if (this.workerData[this.currIndex].label != "" && this.workerData[this.currIndex].value != "") {
        //增加下一条
        let params = {
          opt: 9,
          label: "",
          value: "",
          field: "",
          originalValue: getFloat(100 - percent, 2).toString()
        };
        this.workerData.push(params);
        this.currIndex = this.workerData.length - 1;
        this.$refs.betterScrollId.refresh();
      }
    },
    onDelete4Step1(index) {
      this.onDelete(index);
      //重新计算显示的参考值
      let lastItem = {
        originalValue: 100,
        value: 0
      };
      this.workerData.forEach((item) => {
        item.originalValue = lastItem.originalValue - lastItem.value;
        lastItem = item;
      });
      this.$refs.betterScrollId.refresh();
    },
    // 经纬视图
    onGetArrangeView(type, data) {
      let responArr = data.split("+");
      let resultArr = [];
      let firstArr = [];
      let secondArr = [];
      // console.log(JSON.stringify(responArr), 15);
      if (responArr && responArr.length != 0) {
        responArr.forEach((item) => {
          let param = {};
          // 无层级
          if (item.indexOf("@") === -1) {
            param.level = 0;
            param.value = item;
          } else {
            // 去掉[]  待处理数组
            let ergodicData = item.replace(/\[|\]/g, "").split(",");
            // 若 只有一级
            if (ergodicData.length === 1) {
              let data = ergodicData[0].split(":")[1].split("_");
              param.loopNum = data[0];
              param.level = data[1];
              param.value = data[2].split("@");
            } else {
              // 多级情况
              let lastData = ergodicData.pop(); // 取出最外层
              let lastObj = lastData.split(":")[1].split("_");
              let lastValue = lastObj[2].split("@");
              param.loopNum = lastObj[0];
              param.level = lastObj[1];
              param.value = [];
              // 遍历 最外层数据
              lastValue.forEach((item) => {
                if (this.$getInteger(item)) {
                  param.value.push({ id: item });
                } else {
                  param.value.push(item);
                }
              });

              ergodicData.forEach((item) => {
                let arr = item.split(":");
                let index = arr[1].indexOf("_");
                let lastIndex = arr[1].lastIndexOf("_");
                if (arr[1].slice(index + 1, lastIndex) == 1) {
                  firstArr.push({
                    id: arr[0],
                    loopNum: arr[1].slice(0, index),
                    level: 1,
                    value: arr[1]
                      .slice(lastIndex + 1, arr[1].length)
                      .split("@"),
                  });
                } else {
                  let data = {};
                  data.id = arr[0];
                  data.loopNum = arr[1].slice(0, index);
                  data.level = 2;
                  data.value = [];
                  arr[1]
                    .slice(lastIndex + 1, arr[1].length)
                    .split("@")
                    .forEach((m) => {
                      if (this.$getInteger(m)) {
                        data.value.push({ id: m });
                      } else {
                        data.value.push(m);
                      }
                    });
                  secondArr.push(data);
                }
              });
            }
          }
          resultArr.push(param);
        });
      }

      // 组装数组
      this.onGetFilterArr(firstArr, secondArr);
      this.onGetFilterArr(secondArr, resultArr);
      if (type === "yarnLonArrange") {
        this.yarnLonArrangeViewArr = resultArr;
      } else {
        this.yarnLatArrangeViewArr = resultArr;
      }
      // this.tableData.push({
      //   value: '',
      //   originalValue: "",
      //   field: "greyClothWeight",
      //   opt: 1,
      //   label: "备注",
      // });
    },
    onGetFilterArr(arr1, arr2) {
      for (let k in arr1) {
        let flag = false;
        for (let i in arr2) {
          if (arr2[i].value) {
            for (let j in arr2[i].value) {
              if (typeof arr2[i].value[j] === "object") {
                if (arr1[k].id === arr2[i].value[j].id) {
                  flag = true;
                  arr2[i].value[j] = arr1[k];
                  break;
                }
              }
            }
          }
        }
        if (!flag) {
          arr2.push(arr1[k]);
        }
      }
    },
    // 扫码新增
    onClickAddTable() {
      const that = this;
      that.currIndex = that.workerData.length - 1;
      if (that.workerData.length !== 0 && !that.loading) {
        if (that.workerData[that.currIndex].label == "") {
          that.onClickRight();
        } else if (that.workerData[that.currIndex].value == "") {
          that.$toast.fail("请输入总经数");
        } else {
          let params = {
            opt: 9,
            label: "",
            value: "",
            field: "",
            originalValue: "",
          };
          that.workerData.push(params);
          that.currIndex = that.workerData.length - 1;
        }
      }
    },
    // 扫码
    onClickRight() {
      const that = this;
      that.value = "";
      if (
        that.workerData.length !== 0 &&
        !that.loading &&
        that.workerData[that.workerData.length - 1].label === ""
      ) {
        that.$toast({
          type: "loading",
          message: "请扫员工二维码",
          forbidClick: true,
          duration: 20000,
        });
      }
    },
    // 监听扫码时间
    onWatchEnter() {
      this.code = "";
      this.lastTime = "";
      this.nextTime = "";
      this.lastCode = "";
      this.nextCode = "";
      window.addEventListener("keydown", this.onClickKeydown);
    },
    // 监听事件
    onClickKeydown(e) {
      const that = this;
      that.loading = true;
      that.$toast.clear();
      if (window.event) {
        // IE
        that.nextCode = e.keyCode;
      } else if (e.which) {
        // Netscape/Firefox/Opera
        that.nextCode = e.which;
      }
      if (e.which === 13) {
        if (that.code.length < 3) return; // 手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有
        console.log("扫码结束");
        let loginIndex = that.code.indexOf(",type=login,");
        if (loginIndex != -1) {
          // 扫登陆码
          that.loginInfo = that.code.replace(/Shift/g, "");
          let index = that.loginList.findIndex(
              (item) => item.no == that.loginInfo.substr(0, loginIndex)
          );
          if (index == -1) {
            that.$toast.fail("请联系管理员配置权限");
            return false;
          }

          //检测账号重复扫码
          if (that.workerData[that.workerData.length - 1].label == "") {
            let label = that.loginList[index].no + " " + that.loginList[index].realName;
            for(let item of that.workerData) {
              if(item.label == label) {
                that.$toast.fail("当前用户已扫码");
                return false;
              }
            }

            that.workerData[that.workerData.length - 1].label = label;
            that.workerData[that.workerData.length - 1].field = that.loginList[index].id;
            if(that.flowType == 2 && that.stepNo == 1) {
              let percent = 0;
              that.workerData.forEach((item) => {
                percent += Number(item.value);
              });
              that.workerData[that.workerData.length - 1].originalValue = (100 - percent).toString();
            }
          }
        }
        that.code = "";
        that.lastCode = "";
        that.lastTime = "";
        return;
      }
      that.nextTime = new Date().getTime();
      if (!that.lastTime && !that.lastCode) {
        console.log("扫码开始。。。");
        that.code += e.key;
      }
      if (
        that.lastCode &&
        that.lastTime &&
        that.nextTime - that.lastTime > 500
      ) {
        // 当扫码前有keypress事件时,防止首字缺失
        console.log("防止首字缺失。。。");
        that.code = e.key;
      } else if (that.lastCode && that.lastTime) {
        console.log("扫码中。。。");
        that.code += e.key;
      }
      that.lastCode = that.nextCode;
      that.lastTime = that.nextTime;
    },
    isJSON(str) {
      let obj = "";
      if (typeof str == "string") {
        try {
          obj = JSON.parse(str);
          return obj;
        } catch (e) {
          return false;
        }
      }
      return obj;
    },
    // 解码
    decodeUnicode(str) {
      str = str.replace(/\\/g, "%");
      //转换中文
      str = unescape(str);
      //将其他受影响的转换回原来
      str = str.replace(/%/g, "\\");
      //对网址的链接进行处理
      str = str.replace(/\\/g, "");
      return str;
    },
    // 节流 5s 操作一次
    userClickBtn() {
      let that = this;
      // 设置定时器
      let timer;
      // 设置现在的时间
      let now = dayjs().valueOf();
      // 当现在的时间减去上次点击的时间小于5s时,给出提示，并结束执行函数
      if (that.lastClickTime && now - that.lastClickTime < 5000) {
        clearTimeout(timer);
        // this.$toast({
        //   message: "操作频率太快，请勿重复操作！",
        //   type: "fail",
        // });
        return false;
      } else {
        // 若大于3s，则把现在的时间赋值个lastTime
        that.lastClickTime = now;
      }
      timer = setTimeout(function () {
        that.onGetNextInfo();
        // 每次点击按钮都要把最新的时间赋值给lastTime
        that.lastClickTime = dayjs().valueOf();
      }, 200);
    },
    // 获取下一步信息
    onGetNextInfo() {
      const that = this;
      that.nextStepData = [];
      that.nextStepAllData = [];
      // // 获取下一步信息
      getNextInfo(
        {
          flowType: that.params.flowType,
          stepNo: that.params.stepNo,
        },
        function (res) {
          // console.log(res, "提交前一步");
          that.nextStepAllData = res;
          // 胚布流程
          if (that.params.flowType === 3) {
            that.params.nextStepNo.split(",").forEach((item, i) => {
              that.nextStepData.push(
                item.split("_")[0] + "@0:" + res[i].depId + "_" + res[i].postId
              );
            });
            that.onGetNextCommit();
          } else {
            if (that.params.stepNo === 2) {
              // 整经确认
              let data = that.params.nextStepNo.split(",")[0];
              that.nextStepData.push(
                data.split("_")[0] + "@0:" + res[0].depId + "_" + res[0].postId
              );
              that.onGetNextCommit();
            } else if (that.params.stepNo === 24) {
              // 穿棕/打结
              let index = that.optType == 1 ? 0 : 1;
              that.nextStepData.push(
                (index == 0 ? 5 : 9) +      //穿棕/打结分支这里居然这里写死了.....
                  "@0:" +
                  res[index].depId +
                  "_" +
                  res[index].postId
              );
              that.onGetNextCommit();
            } else if(that.params.stepNo === 18) {
              let index = that.fixWarpFlag == 1 ? 1 : 0;
              that.nextStepData.push(
                  (index == 0 ? 8 : 12) +      //穿棕/打结分支这里居然这里写死了.....
                  "@0:" +
                  res[index].depId +
                  "_" +
                  res[index].postId
              );
              that.onGetNextCommit();
            } else {
              that.params.nextStepNo.split(",").forEach((item, i) => {
                that.nextStepData.push(
                  item.split("_")[0] +
                    "@0:" +
                    res[i].depId +
                    "_" +
                    res[i].postId
                );
              });
              that.onGetNextCommit();
            }
          }
        }
      );
    },
    // 提交
    onGetNextCommit() {
      const that = this;
      if (
        (that.params.stepNo === 1 ||
          that.params.stepNo === 5 ||
          that.params.stepNo === 12) &&
        that.params.flowType === 2
      ) {
        if (!that.checked) {
          that.$toast.fail("必选项不能为空");
          return false;
        } else {
          that.tableData.forEach((item) => {
            if (item.field === "yarnLonArrangeView") {
              item.value = true;
            } else if (item.field === "yarnLatArrangeView") {
              item.value = true;
            }
          });
        }
      }
      // let result = that.tableData.every((item) => item.value != "");
      // if (!result) {
      //   that.$toast.fail("必选项不能为空");
      //   return false;
      // }

      let resParams = {
        stepId: that.params.stepId,
        stepNo: that.params.stepNo,
        stepName: that.params.stepName,
        id: that.params.resId,
        items: that.tableData,
      };

      //多人扫码
      if((that.flowType == 2 && (that.stepNo === 8 || that.stepNo === 5 || that.stepNo === 1)) || (that.flowType == 3 && that.stepNo == 4)) {
        let newData = that.workerData.filter((item) => item.label != "");
        for(let item of newData) {
          if(item.value === "") {
            that.$toast.fail("扫码后请输入具体数值");
            return false;
          }
        }
        if (that.flowType == 2 && that.stepNo === 8) {
          if(0 == newData.length) {
            let index = that.loginList.findIndex((item) => item.id == getInfo().userId);
            newData.push({
              opt: 9,
              label: that.loginList[index].no + " " + that.loginList[index].realName,
              value: that.totalLonNum,
              field: that.loginList[index].id,
              originalValue: that.totalLonNum,
            });
            that.totalLength = that.totalLonNum;
          }
          if(that.totalLonNum == '' || that.totalLength !== that.totalLonNum) {
            that.$toast.fail("总经数异常,请核对");
            return false;
          }
        }
        if((that.flowType == 2 && (that.stepNo === 5 || that.stepNo === 1)) || (that.flowType == 3 && that.stepNo == 4)) {
          if(0 == newData.length) {
            let index = that.loginList.findIndex((item) => item.id == getInfo().userId);
            newData.push({
              opt: 9,
              label: that.loginList[index].no + " " + that.loginList[index].realName,
              value: "100",
              field: that.loginList[index].id,
              originalValue: "100",
            });
          }
          let percent = 0;
          newData.forEach((item) =>{
            percent += Number(item.value);
          });
          if(100 != percent) {
            that.$toast.fail("员工产量百分比必须为100");
            return false;
          }
        }
        resParams.items = that.tableData.concat(newData);
      }

      if (that.params.stepNo === 24) {    //选择穿棕|打结
        resParams = {
          optType: that.optType,
          stepId: that.params.stepId,
          stepNo: that.params.stepNo,
          stepName: that.params.stepName,
          id: that.params.resId,
          items: [
            {
              opt: 2,
              label: that.optType == 1 ? "穿棕" : "打结",
              value: that.optType == 1 ? "穿棕" : "打结",
              field: "optType",
              originalValue: that.optType == 1 ? "穿棕" : "打结",
            },
          ],
        };
      } else if (that.params.stepNo === 20 || that.params.stepNo === 23) {    //分配织机
        resParams = {
          loomNo: that.tableData[0].loomNo,
          stepId: that.params.stepId,
          stepNo: that.params.stepNo,
          stepName: that.params.stepName,
          id: that.params.resId,
          items: [
            {
              opt: 2,
              label: "分配织机",
              value: that.tableData[0].loomNo,
              field: "loomNo",
              originalValue: that.tableData[0].loomNo,
            },
          ],
        };
      }

      /* 修布疵点 */
      let flaws = SPLIT_BLANK;
      if(that.params.flowType === 3 && that.params.stepNo === 4) {
        flaws = that.$refs.greyClothRepairRef.getFlawDataFn();
      }

      // 提交
      getNextCommit(
        {
          taskId: that.params.taskId,
          stepNo: that.params.stepNo,
          nextStepIndex: that.nextStepData.join(","),
          loopCount: "1",
          resId: that.params.resId,
          resParams: JSON.stringify(resParams),
          flaws: flaws,
        },
        () => {
          that.$toast({
            type: "success",
            message: "确认成功，下一步" + that.params.nextStepName,
            onClose: () => {
              // console.log(res, "成功");
              if (that.params.stepNo === 15) {
                // 当前步骤已完成  查询蓝牙连接状态
                that.onGetTaskAcceptNext();
              } else {
                window.api.closeToWin({ name: "warping" });
                // 跳转整经详情
                openWin("index");
              }
            },
          });
        }
      );
    },
    // 获取落布流程
    onGetTaskAcceptNext() {
      const that = this;
      getTaskStep(
        {
          resUrl: that.params.qrCode,
        },
        (repon) => {
          // console.log("扫码接口");
          that.doingResUrl = repon[0].doingResUrl;
          // 报工
          that.params = {
            stepId: repon[0].id,
            flowType: repon[0].flowType,
            resId: repon[0].resId,
            stepNo: repon[0].stepNo,
            taskId: repon[0].taskId,
            resUrl: repon[0].resUrl,
            nextResUrl: repon[0].doingResUrl,
            nextStepNo: repon[0].nextStepNo,
            todoResUrl: repon[0].todoResUrl,
            doingResUrl: repon[0].doingResUrl,
            stepName: repon[0].stepName,
            nextStepName: repon[0].nextStepName,
          };
          getTaskAcceptNext(
            {
              resUrl:
                process.env.VUE_APP_YARN_URL +
                that.params.todoResUrl +
                "/" +
                that.params.resId,
            },
            (res) => {
              that.subResIds = [];
              if (res.craftNum) {
                for (let i = 0; i < res.craftNum; i++) {
                  that.subResIds.push("0");
                }
              }
              that.onGetTaskAccept();
            }
          );
        }
      );
    },
    // 接单
    onGetTaskAccept() {
      const that = this;
      let obj = {
        stepNo: 16,
        taskId: that.params.taskId,
        subResIds: that.subResIds,
        stepId: that.params.stepId,
      };
      // 打印
      getTaskAccept(obj, () => {
        that.isEnabledBluetooth(true);
      });
    },

    // 查询蓝牙状态
    isEnabledBluetooth(printStatus) {
      const that = this;
      window.api
        .require("cxgBluetoothBase")
        .isEnabledBluetooth({}, (ret, err) => {
          if (!err) {
            if (ret.state) {
              // 已打开
              that.onGetConnectState(printStatus);
            } else {
              that.openBluetooth(printStatus);
            }
          } else {
            that.$message.error("code: " + err.code + " msg: " + err.msg);
          }
        });
    },
    // 打开蓝牙
    openBluetooth(printStatus) {
      const that = this;
      window.api
        .require("cxgBluetoothBase")
        .openBluetooth({}, function (ret, err) {
          if (!err) {
            if (ret.state) {
              // 已打开
              that.connectBleByMacAddress(printStatus);
            }
          } else {
            that.listenBluetoothStatus(printStatus);
          }
        });
    },
    listenBluetoothStatus(printStatus) {
      const that = this;
      window.api
        .require("cxgBluetoothBase")
        .listenBluetoothStatus({}, function (ret, err) {
          if (!err) {
            if (ret.status === "STATE_ON") {
              that.connectBleByMacAddress(printStatus);
            }
          } else {
            that.$message.error("code: " + err.code + " msg: " + err.msg);
          }
        });
    },

    // 查询打印机连接状态
    onGetConnectState(printStatus) {
      const that = this;
      that.$toast({
        type: "loading",
        message: "查询打印机连接状态",
      });
      let obj = window.api.require("xGprinterPlus");
      let ret = obj.getConnectState();
      if (ret.status) {
        let result = false;
        ret.state.forEach((bool) => {
          if (bool) {
            result = bool;
          }
        });
        if (result) {
          // 已连接  获取打印数据打印
          that.onPrintList();
        } else {
          // 未连接
          that.$toast({
            type: "error",
            message: "未连接, 请等待",
            duration: 1500,
            onClose: () => {
              that.connectBleByMacAddress(printStatus);
            },
          });
        }
      } else {
        // 未连接
        that.$toast({
          type: "error",
          message: "未连接, 请等待",
          duration: 1500,
          onClose: () => {
            that.connectBleByMacAddress(printStatus);
          },
        });
      }
    },
    // mac 地址连接
    connectBleByMacAddress(printStatus) {
      const that = this;
      that.$toast({
        type: "loading",
        message: "正在连接，请等待",
        duration: 20000,
      });
      var demo = window.api.require("xGprinterPlus");
      demo.connectBleByMacAddress(
        {
          macAddress: that.printMac,
        },
        function (ret, err) {
          if (ret.status) {
            if (ret.message === "已连接") {
              that.$toast.clear();
              // 打印
              if (printStatus) {
                that.onPrintList();
              }
            } else if (ret.message === "连接失败") {
              that.$toast.clear();
              that.$toast.fail("初始化失败");
            }
          } else {
            that.$toast.clear();
            that.$toast.fail(err.msg);
          }
        }
      );
    },
    // 打印列表
    onPrintList() {
      const that = this;
      getTaskAcceptNext(
        {
          resUrl:
            process.env.VUE_APP_YARN_URL +
            that.params.doingResUrl +
            "/" +
            that.params.resId,
        },
        (res) => {
          // console.log(res, "打印");
          res.unshift({});
          that.printData(res);
        }
      );
    },
    printData(res) {
      const that = this;
      that.$toast.loading({
        message: "正在打印",
        forbidClick: true,
        duration: 20000,
        loadingType: "spinner",
      });
      let printCount = res.length;
      let currLength = 0;
      res.forEach((item, i) => {
        let url =
          item.qrCode +
          "?taskId=" +
          item.taskId +
          "&craftId=" +
          item.craftId +
          "&craftNo=" +
          item.craftNo;
        // console.log(url, "打印");
        let obj = window.api.require("xGprinterPlus");
        let rows = [
          {
            lineType: "size",
            width: 35,
            height: 25,
          },
          {
            lineType: "gap",
            data: 2,
          },
          {
            lineType: "direction", //设置打印方向
            direction: "forward", //backward|forward
            mirror: "normal", //normal|mirror
          },
          {
            lineType: "cls", // 清除打印缓冲区
          },
          {
            lineType: "text", //绘制简体中文
            x: 80,
            y: 30,
            rotation: 90, // 0|90|180|270
            xscal: 1, //1~10
            yscal: 3, //1~10
            data: "",
          },
        ];
        if (i > 0) {
          rows = [
            {
              lineType: "size",
              width: 35,
              height: 25,
            },
            {
              lineType: "gap",
              data: 2,
            },
            {
              lineType: "direction", //设置打印方向
              direction: "forward", //backward|forward
              mirror: "normal", //normal|mirror
            },
            {
              lineType: "cls", // 清除打印缓冲区
            },
            {
              lineType: "text", //绘制简体中文
              x: 80,
              y: 30,
              rotation: 90, // 0|90|180|270
              xscal: 1, //1~10
              yscal: 1, //1~10
              data: item.designNo,
            },
            {
              lineType: "text", //绘制简体中文
              x: 40,
              y: 30,
              rotation: 90, // 0|90|180|270
              xscal: 1, //1~10
              yscal: 1, //1~10
              data: item.craftNo,
            },
            {
              lineType: "qrcode", // 绘制qrcode
              x: 100,
              y: 20,
              level: "L", //L|M|H|Q
              cellwith: 4,
              rotation: 0, // 0|90|180|270
              data: url,
            },
          ];
        }
        obj.printLabel(
          {
            rows: rows,
          },
          function (ret, err) {
            that.$toast.clear();
            if (ret.status) {
              ++currLength;
              if (currLength === printCount) {
                that.$toast.success("打印完成");
                openWin("index");
              }
            } else {
              that.$toast.fail("打印异常" + err.msg);
            }
          }
        );
      });
    },
    // 获取重量
    onGetWeight() {
      const that = this;
      that.$toast.loading({
        message: "自动称重中",
        forbidClick: true,
        duration: 20000,
        loadingType: "spinner",
      });
      var serial = window.api.require("serialPort");
      serial.examine(function (ret) {
        if (ret.code) {
          serial.openRead(
            {
              com: "/dev/ttyS3", //串口地址
              rate: 9600, //波特率
              delay: 500, //RX延时 此参数能让数据返回完整单位毫秒（具体设置大小自测）
              hex: false, //返回数据类型 false:text  true:hex
            },
            function (ret) {
              console.log(ret);
              if (ret.code && ret.data) {
                let respon = ret.data;
                serial.close(function (ret) {
                  that.$toast.clear();
                  let res = respon.split(" ");
                  let resultWeight = [...new Set(res)].filter(
                    (item) => item !== ""
                  )[0];
                  // 关闭协议成功
                  that.tableData[0].value = that.insert_flg(
                    resultWeight.trim(),
                    ".",
                    2
                  );
                  // 获取重量自动提交
                  that.onGetNextInfo();
                  if (ret.code) {
                    // 关闭
                  }
                });
              }
            }
          );
        } else {
          that.$toast.clear();
          that.$toast.fail("协议打开失败，请手动填写重量");
        }
      });
    },
    // str表示原字符串变量，flg表示要插入的字符串，sn表示要插入的位置
    insert_flg(str, flg, sn) {
      var newstr = "";
      let frontStr = str.substr(0, str.length == 3 ? 1 : sn);
      let afterStr = str.substr(
        str.length == 3 ? 1 : sn,
        str.length == 3 ? sn : str.length - sn
      );
      newstr = frontStr + flg + afterStr;
      return newstr;
    },

    // 背景色
    /*flawStyleFn() {
      let hex = Math.floor(Math.random() * 16777216).toString(16);
      while (hex.length < 6) {
        hex = '0' + hex;
      }
      return ("background-color: #" + hex);
    }*/

    /* 显示穿棕百分比弹窗 */
    showPercent4Step5Fn(worker) {
      const that = this;
      that.showYarnNumPop = true;
      that.curWorkerData = worker;
      that.curWorkerPercent.percent = worker.originalValue;
      that.curWorkerPercent.yarnNum = "";
    },
    /* 计算根数百分比 */
    calPercent4Step5Fn() {
      const that = this;
      if(that.totalLonNum > 0 && that.curWorkerPercent.yarnNum > 0) {
        that.curWorkerPercent.percent = getFloat(that.curWorkerPercent.yarnNum / that.totalLonNum * 100, 2);
      }
    },
    /* 确认百分比 */
    confirmPercent4Step5Fn() {
      const that = this;
      that.curWorkerData.value = that.curWorkerPercent.percent;
      that.showYarnNumPop = false;
      that.onClickBlur4Step1();
    },

    /* 填充纱线 */
    fillYarnFn(yarns) {
      const that = this;
      yarns.forEach(yarn => {
        let params = {};
        params.opt = 2;
        params.value = "";
        params.label = yarn.yarnAlias + "&nbsp;&nbsp;" + yarn.yarnNo + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + yarn.yarnStandard + "/" + yarn.yarnStrandNum;
        params.field = SPLIT_BLANK;
        params.originalValue = SPLIT_BLANK;
        that.tableData.push(params);
        that.$forceUpdate();
      })
    }
  },
};
</script>

<style lang="scss">
.warping {
  position: relative;
  top: 0;
  .public-scroll {
    .warping-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      .van-cell {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        // height: 70px;
        font-size: 26px;
        &.default {
          .van-cell__title {
            flex: 0 0 80% !important;
            height: 48px;
            display: flex;
            align-items: center;
            span {
              display: inline-block;
              height: 48px;
              line-height: 48px;
              padding: 0 10px;
              flex: 1;
              &:first-child {
                flex: 0 0 80%;
              }
            }
            & > div {
              flex: 1;
            }
          }
          .van-cell__value {
            display: flex;
            justify-content: flex-end;
            .van-field {
              height: 50px;
              padding: 0;
            }
          }
          &.warping-worker-zjbg {
            & > .van-cell__title {
              flex: 0 0 80%;
              display: flex;
              align-items: center;
              span {
                display: inline-block;
                height: 48px;
                line-height: 48px;
                padding: 0 10px;
                flex: 1;
                &:first-child {
                  width: 60% !important;
                }
              }
            }
          }
        }

        &.active {
          .van-cell__title {
            flex: 0 0 80% !important;
            height: 48px;
            display: flex;
            align-items: center;
            .van-checkbox--disabled {
              background-color: greenyellow;
              .van-checkbox__icon--disabled {
                .van-icon {
                  background-color: greenyellow;
                  border-color: greenyellow;
                }
              }
            }
            span {
              display: inline-block;
              height: 48px;
              line-height: 48px;
              padding: 0 10px;
              flex: 1;
              background: greenyellow;
              &:first-child {
                flex: 0 0 80%;
              }
            }
            & > div {
              flex: 1;
            }
          }
          .van-cell__value {
            display: flex;
            justify-content: flex-end;
            .van-field {
              height: 50px;
              padding: 0;
            }
          }
          &.warping-worker-zjbg {
            & > .van-cell__title {
              flex: 0 0 80%;
              display: flex;
              align-items: center;
              span {
                display: inline-block;
                height: 48px;
                line-height: 48px;
                padding: 0 10px;
                flex: 1;
                &:first-child {
                  width: 60% !important;
                }
              }
            }
            & > .van-cell__value {
              margin-right: 20px;
              .van-icon {
                display: flex;
                align-items: center;
              }
              .van-cell {
                padding-top: 0 !important;
              }
            }
          }
        }
        &.warping-yarn_cell {
          &.cell-active {
            .van-cell__title {
              background: greenyellow;
            }
          }
          .van-cell__title {
            flex: 0 0 80%;
            padding: 16px;
          }
          .van-cell__value {
            display: flex;
            justify-content: flex-end;
          }
        }
        &.warping-worker {
          & > .van-cell__title {
            flex: 0 0 80%;
            display: flex;
            align-items: center;
            span {
              display: inline-block;
              height: 48px;
              line-height: 48px;
              padding: 0 10px;
              flex: 1;
              &:first-child {
                flex: 0 0 80%;
              }
            }
          }
          & > .van-cell__value {
            margin-right: 20px;
            .van-icon {
              display: flex;
              align-items: center;
            }
            .van-cell {
              padding-top: 0 !important;
            }
          }
        }
        &:first-child {
          .van-cell__title {
            flex: 1;
          }
        }
        .van-cell__value {
          height: 100%;
          .van-field__body {
            height: 100%;
            .van-field__control {
              height: 100%;
            }
          }
          .van-button {
            padding: 0 40px !important;
            &.van-button--warning {
              margin-right: 15px;
            }
          }
        }
        .van-field {
          padding-right: 0 !important;
        }
      }
      .warping-btn {
        width: 700px;
        height: 100px;
        background: #1677ff;
        border-radius: 2px;
        font-size: 32px;
        color: #ffffff;
        margin-top: 50px;
        // margin-bottom: 100px;
      }

      .van-field__control {
        text-align: right !important;
        font-size: 26px;
      }
    }
  }
  .van-checkbox,
  .van-checkbox__icon,
  .van-icon {
    width: 50px;
    height: 50px;
  }
  .van-icon-success::before {
    position: relative;
    top: 15px;
    font-size: 36px;
  }

  .van-radio {
    height: 50px;
    display: flex;
    align-items: flex-start;
  }

  /* 经纬视图 */
  .warping-yarn_view {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .warping-yarn_view > div {
    margin-right: 6px;
    margin-bottom: 20px;
    height: auto !important;
    span {
      margin-right: 0 !important;
      color: #000 !important;
    }
  }

  .level1 {
    position: relative;
    height: 20px;
    border-bottom: 1px solid #000;
    margin-right: 6px;
  }
  .level2 {
    display: flex;
    height: 40px;
    border-bottom: 1px dotted #000;
    position: relative;
    & > div {
      margin-right: 6px;
    }
    margin-right: 6px;
  }
  .level3 {
    display: flex;
    height: 60px;
    border-bottom: 1px solid #000;
    position: relative;
    & > div {
      margin-right: 6px;
    }
    margin-right: 6px;
  }
  .warping-yarn_view div i {
    position: absolute;
    bottom: -18px;
    left: 50%;
    margin-left: -12px;
    font-size: 14px;
  }

  .van-popup {
    height: 70%;
    .van-picker {
      height: 100%;
      .van-picker__columns {
        height: 100% !important;
        .van-ellipsis {
          font-size: 22px;
        }
        .van-picker-column__item--selected {
          color: #e4393e;
          font-size: 26px;
        }
      }
      .van-picker__cancel,
      .van-picker__confirm {
        font-size: 24px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.warping {
  .yarn-num-pop-body {
    ::v-deep .van-field {
      .van-field__label {
        font-size: 1.1rem;
      }
      input {
        font-size: 1.1rem;
      }
    }
  }
}
</style>
